<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/page_div.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body style="background-color: #fff;">
		<!-- 头部 -->
		<div id="header"></div>
		
		<div id="bootstrap"></div>
		
		<div class="library" id="app">
			<!-- 一级分类 -->
			<div class="tab">
				<ul>
					<li v-for="item,index in oneList" :style="{'border-right':index==4?'none':''}" @click="onOne(index,item)">
						<img :src="imgUrl+item.classifyIcon">
						<p :style="{'color':oneCur==index?'#b00f17':''}">{{item.classifyName}}</p>
					</li>
				</ul>
			</div>
			
			<div class="csccolumn">
				<div class="csccolumn_conten">
					<div class="csccolumn_type">
						<!-- 二级分类 -->
						<div class="csccolumn_item">
							<p class="title">二级分类：</p>
							<div class="ul" v-for="(item,index) in twoList" @click="onTwo(index,item)">
								<img :src="twoCur==index?'static/selected.png':'static/unchecked.png'">
								<p :style="{'color':twoCur==index?'#b00f17':''}">{{item.classifyName}}</p>
							</div>
						</div>
						
						<!-- 三级分类 -->
						<div class="csccolumn_item" style="border-bottom: none;">
							<p class="title">三级分类：</p>
							<div class="ul" v-for="(item,index) in threeList" @click="onThree(index,item)">
								<img :src="threeCur==index?'static/selected.png':'static/unchecked.png'">
								<p :style="{'color':threeCur==index?'#b00f17':''}">{{item.classifyName}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		
			<div class="book_list">
				<ul class="book_ul">
					<li v-for="(item,index) in bookList"  @click="openDetail(item.id)">
						<img :src="imgUrl+item.coverImg">
						<div class="content">
							<p class="title">{{item.bookName}}</p>
							<p class="text">作者：{{item.bookAuthor}}</p>
							<p class="text">出版时间：{{item.publishTime}}</p>
							<p class="text">ISBN：{{item.isbn}}</p>
							<p class="text" style="margin: 0;">定价：<span>￥{{item.discountPrice}}</span></p>
						</div>
					</li>
				</ul>
				<div v-cloak class="app">
					<div v-show="total >= 1" class="pageContainer">
						<ul class="pagesInner">
<!--							<li class="page" @click="prevOrNext(-1)"><span aria-hidden="true">&lt;</span></li>-->
							<li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item == pageIndex}" @click="selectPage(item)">
								<span>{{item}}</span>
							</li>
<!--							<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true">&gt;</span></li>-->
						</ul>
						共{{total}}页&nbsp;转到第&nbsp;
						<input type="text" v-model="goToPage" class="totalinput">
						&nbsp;页&nbsp;
						<button @click="handleGoToPage">GO</button>
					</div>
				</div>
			</div>
			
			<!-- 加载中 -->
			<div class="load_page" v-show="isLoadingShow">
				<div class="content">
					<div class="item">
						<i class="loader --1"></i>
					</div>
				</div>
			</div>
		</div>
		<!-- <div id="page" class="page_div"></div> -->
		<!-- 底部 -->
		<div id="footer"></div>

	</body>
	<script>
		function getQueryVariable(variable)
		{
			const query = window.location.search.substring(1);
			const vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
				var pair = vars[i].split("=");
				if(pair[0] == variable){return pair[1];}
			}
			return(false);
		}
		const App = {
			data() {
				return {
					imgUrl:'http://dbs.wutp.com.cn/CM-API',
					pageIndex:1,
					pageSize:10,
					oneCur:0,
					twoCur:0,
					threeCur:0,
					bookType:'GDJY',
					secondLabel:'QB',
					thirdLabel:'QB',
					oneList:[],
					twoList:[],
					threeList:[],
					bookList:[],
					goToPage: '',
					total:1,
					isLoadingShow:false
				}
			},
			computed: {
				pages: function () {
					// 每次最多显示5个页码
					var c = this.pageIndex
					var t = this.total
					var p = []
					for (var i = 1; i <= t; i++) {
						p.push(i)
					}
					var l = p.length
					if (l <= 5) { // 总页数<=5，显示全部页码
						return p
					} else if (l > 5 && c <= 4) { // 总页数>5 && 当前页面<=3
						return [1, 2, 3, 4, 5,'...', '尾页']
					} else if (l > 5&& c > 4 && c <= l - 3) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3
						return [c - 3, c - 2, c - 1, c, c + 1,  '...', '尾页']
					} else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3
						debugger
						return [ '首页',t - 3, t - 2, t - 1,t ]
					}
				},
			},
			mounted(){
				console.log("window.location.href",window.location.href)
				sessionStorage.setItem('href',window.location.href);
				const oneCur = getQueryVariable("oneCur")
				const bookType = getQueryVariable("booksType")
				if(oneCur != ''){
					this.oneCur = oneCur
				}
				if(bookType != ''){
					this.bookType = bookType
				}
				this.getBooksList()
				this.getBooksClassify()
			},
			methods:{
				async getBooksClassify() {
					let that = this;
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBooksClassify?booksClassifyType=BooksType_first" ,
					}).then(function (res) {
						that.oneList = res.data.data;
					})
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBooksClassify?booksClassifyType=BooksType_second" ,
					}).then(function (res) {
						that.twoList = res.data.data;
						console.log(that.twoList)
						// that.twoList.push({id: '1', classifyName: '全部', classifyCode: 'QB', classifyIcon: null, xcxClassifyIcon: null})
						let a = {id: '1', classifyName: '全部', classifyCode: 'QB', classifyIcon: null, xcxClassifyIcon: null}
						that.twoList.splice(0, 0, a);
					})
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBooksClassify?booksClassifyType=BooksType_third" ,
					}).then(function (res) {
						that.threeList = res.data.data;
						// that.threeList.push({id: '2', classifyName: '全部', classifyCode: 'QB', classifyIcon: null, xcxClassifyIcon: null})
						let b = {id: '2', classifyName: '全部', classifyCode: 'QB', classifyIcon: null, xcxClassifyIcon: null}
						that.threeList.splice(0, 0, b);
					})
				},
				async getBooksList() {
					let that = this;
					that.isLoadingShow = true
					const orderParam={publish_time: false}
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/booksApi/getBooksList?pageNum="+that.pageIndex+"&pageSize="+that.pageSize
								+"&booksType="+that.bookType+"&secondLabel="+that.secondLabel+"&thirdLabel="+that.thirdLabel,
						params: {orderParam:orderParam},
					}).then(function (res) {
						if(res.data.data.content.length>0){
							that.bookList = res.data.data.content;
						}else{
							that.bookList = ''
						}
						// 总条数除以10并向上取整得到总页数
						const total = res.data.data.total / that.pageSize;
						that.total = Math.ceil(total);
						// that.total = res.data.data.total;
						that.pageIndex = res.data.data.pageNum
						that.pageSize = res.data.data.pageSize;
						that.isLoadingShow = false
					})
				},
				onOne(e,item){
					this.oneCur = e;
					this.bookType = item.classifyCode
					this.getBooksList()
				},
				onTwo(e,item){
					this.twoCur = e;
					this.secondLabel = item.classifyCode
					this.getBooksList()
				},
				onThree(e,item){
					this.threeCur = e;
					this.thirdLabel = item.classifyCode
					this.getBooksList()
				},
				prevOrNext: function(n) {
					this.pageIndex += n
					this.pageIndex <= 1 ? this.pageIndex = 1 : this.pageIndex > this.total ? this.pageIndex = this.total : null
					this.getBooksList();
				},
				selectPage: function(n) {
					if(n=='尾页'){
						n = this.total
					}
					if(n=='首页'){
						n = 1
					}
					if (n === this.pageIndex) return
					if (typeof n === 'string') return
					this.pageIndex = n;
					this.getBooksList();
				},
				handleGoToPage: function() {
					this.pageIndex = this.goToPage <= 1 ? 1 : this.goToPage - 0 >= this.total - 0 ? this.total :
							this.goToPage
					this.goToPage = this.pageIndex;
					this.getBooksList();
				},
				openDetail(id){
					let hrefs = window.location.href;
					window.location.href="reDetails.html?name=TSZX&id="+id+'&href='+hrefs ;
				},
			}
		};
		Vue.createApp(App).mount('#app');
		
	</script>
	<style>
		
		.library {
			margin: 0 3rem;
		}
		
		.csccolumn_conten{
			background-color: #f6f7f9;
			padding: 0 0.49rem 0.2rem;
		}
		.csccolumn_item{
			display: flex;
			align-items: center;
			padding: 0.24rem 0;
			border-bottom: 0.01rem solid #dce0eb;
		}
		
		.csccolumn_item .title{
			width: 0.9rem;
			font-size: 0.18rem;
			font-weight: 600;
			color: #333;
			line-height: 0.18rem;
			margin-right: 0.1rem;
		}
		.csccolumn_item .ul{
			display: flex;
			align-items: center;
			margin: 0 0.12rem;
			cursor: pointer;
		}
		.csccolumn_item .ul img{
			width: 0.18rem;
			height: 0.18rem;
			margin-right: 0.06rem
		}
		.csccolumn_item .ul p{
			font-size: 0.16rem;
			color: #333;
			line-height: 0.18rem;
		}
		
		.csccolumn_subject{
			border-top: 0.01rem dashed #E5E5E5;
			padding-top: 0.43rem;
		}
		.csccolumn_subject .csccolumn_item{
			margin-bottom: 0;
			align-items: flex-start;
		}
		.csccolumn_subject .csccolumn_item p{
			width: 1.1rem;
			align-items: flex-start;
		}
		.csccolumn_subject .csccolumn_item .ul{
			flex-wrap: wrap;
		}
		.csccolumn_subject .csccolumn_item .ul a{
			margin-bottom: 0.46rem;
		}
		.tab{
			
		}
		.tab ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 1.2rem;
			background-color: #f6f6f6;
		}
		.tab ul li{
			border-right: 0.01rem solid #999999;
			width: 20%;
			text-align: center;
			cursor: pointer;
		}
		.tab ul li img{
			width: 0.4rem;
		}
		.tab ul li p{
			font-size: 0.17rem;
			color: #213051;
		}
		.book_list{
			margin-top: 0.4rem;
		}
		.book_list .book_ul{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 0.1rem;
		}
		.book_list .book_ul li{
			width: 46.7%;
			border: 0.01rem solid #ddd;
			padding: 0.14rem;
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-bottom: 0.3rem;
		}
		.book_list .book_ul li img{
			width: 1.8rem;
			height: 2.4rem;
			margin-right: 0.3rem;
		}
		.book_list .book_ul li .content{
			flex: 1;
		}
		.book_list .book_ul li .content .title{
			font-size: 0.22rem;
			margin-bottom: 0.2rem;
			letter-spacing: 0.01rem;
			color: #333;
			font-weight: 600;
			line-height: 0.3rem;
		}
		.book_list .book_ul li .content .text{
			font-size: 0.17rem;
			letter-spacing: 0.01rem;
			margin-bottom: 0.16rem;
			color: #656565;
		}
		.book_list .book_ul li .content .text span{
			font-size: 0.24rem;
			font-weight: bold;
			letter-spacing: 0.01rem;
			color: #ae0e16;
			margin-right: 0.2rem;
		}

	</style>
</html>
